.hydropower-details {
  padding-top: 90rpx;
  .tabs {
    margin-top: 90rpx;
    margin-bottom: 50rpx;
    :deep(.u-tabs__wrapper__scroll-view-wrapper) {
      flex: none;
    }
    :deep(.u-tabs__wrapper) {
      justify-content: center;
    }
    
  }
  .payment-box {
    .payment-information {
      background: #ffffff;
      padding: 23rpx 42rpx;
      .payment-title {
        font-size: 31rpx;
        font-family: "ali-m";
      }
      .payment-content {
        position: relative;
        margin-top: 10rpx;
        padding: 14rpx 10rpx;
        color: #a98361;
        font-size: 23rpx;
        width: 100%;
        background: linear-gradient(90deg, #f9f4e3 0%, #fbe5ce 100%);
        .payment-icon {
          width: 32rpx;
          height: 32rpx;
          background: @kuafu-apartment-new-bg no-repeat;
          background-size: 100% 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .payment-form {
      background: @color-origin-white;
      padding: 30rpx;
      margin-top: 50rpx;
      .coins-box {
        width: 100%;
        height: 200rpx;
        text-align: center;
        .coins {
          display: inline-block;
          .coins-img {
            display: inline-block;
            width: 103rpx;
            height: 103rpx;
            background: @kuafu-apartment-coins-bg no-repeat;
            background-size: 100% 100%;
          }
          .coins-text {
            height: 20rpx;
            font-family: "ali-m";
            .coins-prompt {
              font-family: "ali";
              font-size: 19rpx;
            }
          }
        }
      }
      .item-box {
        display: flex;
        flex-flow: row nowrap;
        margin-top: 20rpx;
        .u-page__tag-item {
          width: 120rpx;
          margin-right: 20px;
          :deep(.u-tag) {
            background-color: #f2f2f2;
            border-color: transparent;
            .u-tag__text {
              margin: 0 auto;
              color: @color-black-text;
            }
            &.u-tag--success {
              background-color: #17c17c;
              border-color: #17c17c;
              .u-tag__text {
                color: @color-font;
              }
            }
          }
        }
      }
    }
    // #ifndef MP-WEIXIN
    :deep(.u-notice-bar) {
      padding: 0;
      .u-notice__content__text {
        * {
          white-space: nowrap !important;
        }
      }
    }
    // #endif
  }
  .popup-pay {
    font-family: 'ali-p';
    :deep(.u-popup__content) {
      padding: 35rpx 27rpx 26rpx 40rpx;
      box-sizing: border-box;
      border-radius: 33rpx 33rpx 0 0;
    }
    &__title {
      text-align: center;
      font-weight: 500;
      font-size: 31rpx;
      color: @color-black-text;
    }

    &__desc {
      border-top: 1px solid @color-light-grey-border;
      border-bottom: 1px solid @color-light-grey-border;
      padding: 20rpx 10rpx 17rpx 0;
      margin-top: 27rpx;
      &-title {
        font-family: 'ali-p';
        font-size: 31rpx;
        color: @color-black-text;
      }
      &-detail {
        display: flex;
        justify-content: space-between;
        font-size: 31rpx;
        font-family: 'ali-p';
        &-label {
          color: @color-light-grey-text;
        }
        &-value {
          color: @color-orange-text;
          margin-top: 17rpx;
        }
      }
    }

    :deep(.pay-way__img) {
      width: 44rpx;
      height: 44rpx;
      object-fit: cover;
    }
    :deep(.pay-way__name) {
      display: flex;
      flex-direction: column;
      font-family: 'ali-p';
      margin-left: 12rpx;
      &-title {
        font-weight: 500;
        font-size: 31rpx;
        color: @color-black-text;
      }

      &-desc {
        font-size: 23rpx;
        color: @color-light-grey-text;
        margin-top: 12rpx;
      }
    }

    :deep(.u-cell__title) {
      display: flex;
      align-items: center;
      /* #ifdef MP-WEIXIN */
      view {
        &:first-child {
          display: flex;
          align-items: center;
        }
      }
      /* #endif */
    }

    :deep(.u-cell__body) {
      padding-left: 0;
      padding-right: 0;
    }

    &__btn-group {
      .btn__pay,
      .btn__later-pay {
        width: 100%;
        height: 65rpx;
      }

      .btn__pay {
        margin-top: 53rpx;
      }

      .btn__later-pay {
        margin-top: 23rpx;
      }

      /* #ifdef MP-WEIXIN */
      :deep(.u-button) {
        &:first-child{
          margin-top: 53rpx;
        }
        &:last-child {
          margin-top: 23rpx;
        }
      }
      /* #endif */
    }
  }
}
